/*
 * 基于iview的筛选项展示组件
 * @Author: ljb
 * @Date: 2018-09-18 10:13:02
 * @Last Modified by: ljb
 * @Last Modified time: 2019-01-29 14:57:30
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	.v-component-item-group {
		position: relative;
		width: 100%;
		padding-right: 200px;
		box-sizing: border-box;
		overflow: hidden;
		&.limited-height {
			height: 31px;
		}
		/*选项的样式*/
		.item-container {
			& > div {
				display: inline-block;
				padding: 5px 17px;
				margin-right: 20px;
				font-size: 14px;
				color: #999;
				background-color: rgba(248,248,248,1);
				border-radius: 15px;
				cursor: pointer;
				transition: all .3s 0s ease;
				&:hover {
					background:rgba(45,140,240,0.4);
					color: #fff;
				}
				&:active {
					background-color: #2D8CF0;
					color: #fff;
				}
				&.has__margin-bottom {
					margin-bottom: 30px;
				}
				&.selected {
					background-color: #2D8CF0;
					color: #fff;
				}
			}
		}
		/*选项的样式 END*/
		.warp {
			overflow: hidden;
			&.has__limited-height {
				max-height: 150px;
			}
		}
		/*展开收起按钮样式*/
		.expand-or-retract {
			position: absolute;
			top: 0;
			right: 100px;
			width: 100px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 14px;
			color: #999;
			cursor: pointer;
			.arrow-icon {
				transition: transform .3s 0s ease;
				transform: rotateZ(0deg);
				&.rotate {
					transform: rotateZ(180deg);
				}
			}
		}
		/*展开收起按钮样式 END*/
	}

</style>
<template>
	<div :class="[ !is_expand ? 'limited-height' : '' ,'v-component-item-group']">
		<!-- vue的滚动条组件 -->
		<scroll-bar
			:scroll-track-style="scrollTrackStyle"
			:scroll-bar-style="scrollBarStyle"
			:class="[ is_overflow && is_expand ? 'has__limited-height' : '','warp']">
			<div :class="`item-container ${name}`">
				<!-- <div
					:class="[ judgeSelected('') ? 'selected' : '','item' ]"
					@click="selectItem('')">{{ $t('common.all') }}</div> -->
				<div
					v-for="list in formatArray(lists)"
					:key="list.id"
					:class="[
						judgeSelected(list[needKey]) ? 'selected' : '',
						is_overflow ? 'has__margin-bottom' : '',
						'item'
					]"
					@click="selectItem(list[needKey])">
					{{ list.name }}</div>
			</div>
		</scroll-bar>

		<!-- 更多和收起按钮 -->
		<div
			v-if="is_overflow"
			class="expand-or-retract"
			@click="expandItem">
			<span>{{ !is_expand ? $t('common.expand') : $t('common.retract') }}</span>
			<Icon
				:class="[is_expand ? 'rotate' : '','arrow-icon']"
				type="chevron-down"/>
		</div>
	</div>
</template>

<script>

import scrollBar from 'vue-scroll-bar';	// 基于vue的滚动条组件

export default {
	name: 'Category',
	components: {
		scrollBar,
	},
	props: {
		value: {
			type: [String, Number],
			default() {
				return '';
			},
		},
		name: {	// 组件的唯一标识name值，同样是传回去的key值
			type: String,
			default() {
				return 'default';
			},
		},
		selectType: {	// 选择的类型，默认是单选
			type: String,
			default() {
				return 'single';
			},
		},
		lists: {
			type: Array,
			required: true,
		},
		needKey: {
			type: String,
			default() {
				return 'id';
			},
		},
	},
	data() {
		return {
			scrollTrackStyle: {
				width: '10px',
				borderRadius: '8px',
				backgroundColor: '#F2F2F2',
			},					// 滚动条的背景样式
			scrollBarStyle: {
				width: '10px',
				borderRadius: '8px',
				backgroundColor: '#D4D4D4',
			},					// 滚动条的样式

			is_overflow: false,	// 是否超过一行

			is_expand: false,	// 是否展开

			selected_item: '',	// 选中的item（单选模式下是字符串，多选模式下是数组）
		};
	},
	watch: {
		lists: {
			handler(value, old_value) {	// 第一个参数是变化后的值，第二个参数是变化前的值
				const old_value_string = JSON.stringify(old_value);
				const new_value_string = JSON.stringify(value);
				if (!value || value.length === 0 || new_value_string === old_value_string) return;

				this.$nextTick(() => {
					this.selectItem(value[0][this.needKey]);
					this.is_overflow = this.isOverOnelineHeight();
				});
			},
			immediate: true,
		},
		value(val) {
			this.selected_item = val;
		},
	},
	methods: {
		/**
		 * 格式化数组，去除空值，防止循环出错
		 * @param  {array} arr {需要格式化的数组}
		 * @return {array} {格式化完成的数组}
		 */
		formatArray(arrs) {
			if (!arrs || arrs.length === 0) return arrs;

			return arrs.filter(arr => arr);
		},
		/**
		 * 根据外层高度来判断是否超过了1行的高度
		 * @return {Boolean} {true代表超过，false代表没超过}
		 */
		isOverOnelineHeight() {
			const container = document.querySelector(`.item-container.${this.name}`);
			const container_width = container.offsetWidth;
			const items = container.querySelectorAll('.item');

			let item_total_width = 0;

			items.forEach((item) => {
				const item_width = item.offsetWidth;
				item_total_width += item_width;
			});

			item_total_width += items.length * 20;	// 20是因为每个item都有个margin-right:20px;

			if (item_total_width > container_width) return true;

			return false;
		},

		/**
		 * 判断当前项是否被选中
		 * @param  {Number} index {当前项的index值}
		 * @return {Boolean} {true代表选中，false代表未选中}
		 */
		judgeSelected(index) {
			switch (this.selectType) {
			case 'multi': {
				const selected_index = this.selected_item.indexOf(index);

				return selected_index !== -1;
			}

			default: {
				return this.selected_item === index;
			}
			}
		},

		/**
		 * 选中item
		 * @param  {String}} id {选中的item对应的id}
		 * @return {undefined}
		 */
		selectItem(id) {
			switch (this.selectType) {
			case 'multi': {
				const selected_index = this.selected_item.indexOf(id);
				if (selected_index !== -1) {
					this.selected_item.splice(selected_index, 1);
				} else {
					this.selected_item.push(id);
				}
				break;
			}

			default: {
				if (this.selected_item === id) return;
				this.selected_item = id;
				break;
			}
			}

			this.$emit('input', this.selected_item);
			// this.$emit('search');
		},

		/**
		 * 展开item
		 * @return {undefined}
		 */
		expandItem() {
			this.is_expand = !this.is_expand;
		},
	},
};
</script>
